<template>
  <div class="wiper">
    <Filter title="菜单管理" :items="items" :model="filterModel"/>
    <Table :columns="columns" :data="data" :pagination="filterModel"/>
    <Form ref="form" v-model:show="show" :rules="rules" :model="formModel" :items="formItems">
      <template #bottom>
        <FormItem name="icon" label="图标">
          <Input v-if="formModel.useDevice == '0'" ref="iconRef" placeholder="请选择图标" :value="formModel.icon"
                 @click="showIcon = true" disable="true"/>
          <Input v-if="formModel.useDevice == '1'" ref="iconRef" placeholder="请选择图标" :value="formModel.icon"
                 @change="(e)=>{formModel.icon = e.target.value}"/>
        </FormItem>
      </template>
    </Form>
    <Modal :open="showIcon" title="选择图标" :width="900">
      <Icon @clickIcon="_clickIcon"/>
      <template #footer>
        <Button key="back" @click="showIcon = false">取消</Button>
        <Button key="submit" type="primary" @click="_selectIcon">确定</Button>
      </template>
    </Modal>
  </div>
</template>
<script>
import {Input, FormItem, Modal, Button} from "ant-design-vue";
import Filter from "../../components/Filter";
import Table from "../../components/Table";
import Form from "../../components/Form";
import {pager, save, remove, details, menuAll} from "../../api/menu";
import {
  ColumnProps, RuleProps, FormProps,
  FilterItems, FormItems, FilterModelProps
} from "./config";
import {Dictionary} from "../../utils/Dictionary";
import {listAll} from "../../api/route";
import Icon from "../../components/Icon"

export default {
  name: 'menu',
  data() {
    return {
      items: FilterItems,
      data: [],
      show: false,
      formModel: FormProps,
      rules: RuleProps,
      columns: ColumnProps,
      filterModel: {
        ...FilterModelProps,
        onChange: (page, pageSize) => {
          this.filterModel.current = page;
          this.filterModel.pageSize = pageSize;
          this.load();
        }
      },
      formItems: FormItems,
      showIcon: false,
      selectIcon: '',
    }
  },
  components: {
    Filter,
    Table,
    Form,
    Input,
    FormItem,
    Modal,
    Icon,
    Button
  },
  mounted() {
    // 加载路由
    this._listRouteAll();
    // 加载树形结构
    this._menuAll();
    // 加载菜单类型
    this._menuType(this.$store.state.dictionary);
    this.load();
  },
  computed: {
    isDictionary() {
      return this.$store.state.dictionary
    }
  },
  watch: {
    'formModel.type': {
      handler: function (val) {
        val === '0' || val === '2' ? delete this.rules.routeId :
            this.rules = {...this.rules, routeId: [{required: true, message: '请选择路由'}]};
        if (val === '2') {
          this.formItems.filter(item => item.key === 'buttonType')[0].isShow = true;

        } else {
          this.formItems.filter(item => item.key === 'buttonType')[0].isShow = false;
        }
      }
    },
    isDictionary(data) {
      this._menuType(data);
    }
  },
  methods: {

    /**
     * 添加方法
     */
    add() {
      this.formModel.id = "";
      this.$refs.form.resetField();
      this.show = true;
    },

    /**
     * 修改方法
     */
    modify(ids) {
      this.show = true;
      details(ids.join(",")).then(res => {
        this.formModel = res.data;
      })
    },

    /**
     * 删除方法
     */
    delete(ids) {
      return new Promise((resolve, reject) => {
        remove(ids.join(",")).then(res => {
          this.load();
          return resolve(res);
        }).catch(e => {
          return reject(e);
        })
      })
    },

    /**
     * 提交
     */
    submit() {
      return new Promise((resolve, reject) => {
        save(this.formModel).then(res => {
          this.load();
          return resolve(res);
        }).catch((e) => {
          return reject(e)
        })
      });
    },


    /**
     * 加载数据
     */
    load() {
      pager(this.filterModel).then(res => {
        this.data = res.data.rows;
        this.filterModel.total = res.data.total;
      })
    },

    /**
     * 重命名
     * @private
     */
    _rename(list, key = "id") {
      return list?.map(item => {
        return {label: item.name, value: item[key], children: this._rename(item.children)}
      });
    },

    /**
     * 查找所有树形
     * @private
     */
    _menuAll() {
      menuAll().then(res => {
        this.formItems.filter(item => item.key === 'parentId')[0].data = this._rename(res.data)
      })
    },

    /**
     * 查找菜单类型&按钮类型
     * @param data
     * @private
     */
    _menuType(data) {
      const menuRows = this._rename(data.filter(item => item.code === Dictionary.MENU_TYPE)
          .map(item => item.children)[0], "code");
      const buttonRows = this._rename(data.filter(item => item.code === Dictionary.BUTTON_EVENT)
          .map(item => item.children)[0], "code");
      const useDeviceRows = this._rename(data.filter(item => item.code === Dictionary.USE_DEVICE)
          .map(item => item.children)[0], "code");
      console.log(useDeviceRows)
      this.formItems.filter(item => item.key === 'type')[0].data = menuRows;
      this.formItems.filter(item => item.key === 'buttonType')[0].data = buttonRows;
      this.formItems.filter(item => item.key === 'useDevice')[0].data = useDeviceRows;
    },

    /**
     * 加载路由
     *
     * @private
     */
    _listRouteAll() {
      listAll().then(res => {
        this.formItems.filter(item => item.key === 'routeId')[0].data = this._rename(res.data)
      })
    },

    /**
     * 选择图标
     * @private
     */
    _selectIcon() {
      this.showIcon = false;
      this.formModel.icon = this.selectIcon;
    },

    /**
     * 选择图标
     * @param icon
     * @private
     */
    _clickIcon(icon) {
      this.selectIcon = icon;
    }
  }
}
</script>
<style>

</style>
